<template>
  <div class="h-full overflow-auto">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Checkbox v-model:checked="model.isRecall">能否撤回</Checkbox>
        <Checkbox v-model:checked="model.isReactive">能否变更</Checkbox>
        <Checkbox v-model:checked="model.isReply">能否回复</Checkbox>
        <a-button type="primary" @click="handleSave"> 保存 </a-button>
      </template>
      <template #action="{ record, index }">
        <div>
          <Checkbox v-model:checked="record.canSee">发起</Checkbox>
          <Checkbox v-model:checked="record.canStop">结束</Checkbox>
          <Checkbox v-model:checked="record.canDiscard">放弃</Checkbox>
          <Checkbox v-model:checked="record.canDel">删除</Checkbox>
          <Checkbox v-model:checked="record.canDelAttach">删除附件</Checkbox>
          <a @click="handleFormDomain(record, index)">表单域</a>[<a
            @click="record.isSee = !record.isSee"
            >查看</a
          >]
        </div>
        <div v-if="record.isSee">
          <InputTextArea :rows="3" v-model:value="record.fieldNames" disabled />
        </div>
      </template>
    </BasicTable>
    <FormDomainModal @register="registerFormDomainModal" @success="handleSuccessFormDomainModal" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch, nextTick, h, unref } from 'vue';
  import { Checkbox, Input } from 'ant-design-vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import {
    getAdminFlowEditFreeFlowPage,
    getAdminFlowUpdateFreeFlow,
  } from '/@/api/flowManage/flowManage';
  import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { columns } from './config.data';
  import FormDomainModal from './modules/FormDomainModal.vue';
  import { isArray } from '/@/utils/is';
  export default defineComponent({
    components: { BasicTable, FormDomainModal, Checkbox, InputTextArea: Input.TextArea },
    props: {
      activeKey: {
        type: String,
        default: '',
      },
      currentRecord: {
        type: Object,
        default: () => {
          return {};
        },
      },
      formCode: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      const { createMessage, createConfirm } = useMessage();
      const { t } = useI18n();
      const model = ref<Recordable>({});
      const currentIndex = ref(-1);

      const [registerTable, { setProps, setTableData, getDataSource }] = useTable({
        title: props.currentRecord.name,
        api: getAdminFlowEditFreeFlowPage,
        columns,
        searchInfo: {}, //额外的参数
        useSearchForm: false,
        showTableSetting: false,
        bordered: true,
        indexColumnProps: { width: 50 },
        showIndexColumn: true,
        immediate: false,
        pagination: false, //无分页
        actionColumn: {
          //   width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
          align: 'left',
        },
      });

      const handleCreate = () => {};

      const handleEdit = async () => {
        const data = getDataSource();
        model.value.list = data;
        console.log('handleEdit', unref(model));
        await getAdminFlowUpdateFreeFlow(unref(model));
        createMessage.success(t('common.opSuccess'));
        fetch();
      };

      const handleDelete = async (record: Recordable) => {
        // await api({ id: record.id });
        fetch();
      };

      const fetch = async () => {
        const params = {
          typeCode: props.currentRecord.code,
        };
        const data = await getAdminFlowEditFreeFlowPage(params);
        model.value = data;
        model.value.typeCode = props.currentRecord.code;
        const { list } = model.value;
        if (isArray(list)) {
          setTableData(list);
        }
      };
      watch(
        () => props.currentRecord.code,
        async (newVal) => {
          console.log('props.currentRecord', props.currentRecord);
          if (newVal) {
            await nextTick();
            setProps({
              title: props.currentRecord.name,
            });
            fetch();
          }
        },
        {
          immediate: true,
        },
      );

      const [registerFormDomainModal, { openModal: registerFormDomainModalOpen }] = useModal();
      //打开表单域回显
      const openFormDomainModal = (record, index) => {
        registerFormDomainModalOpen(true, {
          record,
          formCode: props.formCode,
          index,
        });
      };
      //表单域回调
      const handleSuccessFormDomainModal = (record, index) => {
        console.log('record, index', record, index);
        const data = getDataSource();
        data[currentIndex.value] = { ...record };
        setTableData(data);
      };

      const handleFormDomain = (record, index) => {
        currentIndex.value = index;
        openFormDomainModal(record, index);
      };
      const handleSave = () => {
        createConfirm({
          iconType: 'warning',
          title: () => h('span', '您确定要保存么？'),
          onOk: async () => {
            await handleEdit();
          },
        });
      };
      return {
        registerTable,
        handleCreate,
        handleDelete,
        model,
        handleFormDomain,
        registerFormDomainModal,
        handleSuccessFormDomainModal,
        handleSave,
      };
    },
  });
</script>
